<template>
    <div>
        <div id="content-header">
            <h1>Physical Assets</h1>
        </div>
        <table>
            <thead>
            <tr>
                <th>
                    #
                </th>
                <th>
                    Asset ID
                </th>
                <th>
                    Asset Name
                </th>
                <th>
                    Asset Proximity
                </th>
                <th>
                    Asset Owner
                </th>
                <th>
                    Tax ID
                </th>
                <th>
                    Create At
                </th>
                <th>

                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(asset, index) in assets">
                <td>
                    {{ (index + 1) }}
                </td>
                <td>
                    {{ asset.id }}
                </td>
                <td>
                    {{ asset.name }}
                </td>
                <td>
                    {{ asset.proximity }}
                </td>
                <td>
                    {{ asset.asset_owner }}
                </td>
                <td>
                    {{ asset.tax_id }}
                </td>
                <td>
                    {{ asset.created_at }}
                </td>
            </tr>
            </tbody>
        </table>

    </div>
</template>
<script>
    import axios from 'axios'

    export default {

        data() {
            return {
                assets: null
            }
        },

        mounted: function() {
            var self = this;

            axios.get(process.env.API_ROOT + '/assets/', {
            })
                .then(function(response) {
                    self.assets = response.data;
                });

        }

    }
</script>